<template>
  <div class="container" v-if = "loading">
    <div class="title"></div>
    <div class="charts">
      <div class="top">
        <div class="item" v-for="item in forecastWeather" :key="item.index">
          <span>{{ item.week }}</span>
          <span>{{ item.date }}</span>
          <span>{{ item.dayweather }}</span>
          <span>风力{{ item.daypower }}级</span>
        </div>
      </div>
      <div class="bottom">
        <v-chart class="chart" :option="option"></v-chart>
      </div>
    </div>
  </div>
  <div v-else class="container" style="color: #fff;">正在加载数据...</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getWeatherByIp, getForecastWeather } from '@/api/index.js'

const route = useRoute()

// 添加指示器用于控制数据加载完成后显示页面
const loading = ref(false)

const formatWeatherDates = (casts) => {
  const weekMap = {
    1: '周一',
    2: '周二',
    3: '周三',
    4: '周四',
    5: '周五',
    6: '周六',
    0: '周日',
  }
  return casts.map((cast, index) => {
    cast.date = cast.date.replace(/^\d{4}-/, '')
    if (index === 0) {
      cast.week = '今天'
    } else if (index === 1) {
      cast.week = '明天'
    } else {
      cast.week = weekMap[cast.week]
    }
    return cast
  })
}

const forecastWeather = ref([])
const dayTemp = ref([])
const nightTemp = ref([])

const getTemperature = (data) => {
  dayTemp.value = data.map((item) => item.daytemp)
  nightTemp.value = data.map((item) => item.nighttemp)
}

onMounted(async () => {
  if (route.name === 'main') {
    const { adcode } = await getWeatherByIp()
    const { forecasts } = await getForecastWeather(adcode)
    const data = forecasts[0].casts
    getTemperature(data)
   /*  console.log(dayTemp.value, nightTemp.value) */
    forecastWeather.value = formatWeatherDates(data)
    renderChart(dayTemp.value, nightTemp.value)
  } else if (route.name === 'search') {
    const {  forecasts } = await getForecastWeather(route.params.adcode)
    const data = forecasts[0].casts
    getTemperature(data)
    forecastWeather.value = formatWeatherDates(data)
    renderChart(dayTemp.value, nightTemp.value)
  }
  loading.value = true
})

const option = ref(null) // 一定要注意这里的option是个ref类型,要初始化为null或者对象,初始化为空数组则会报错

const renderChart = (v1, v2) => {
  option.value = {
    xAxis: {
      type: 'category',
      show: false,
      boundaryGap: false,
      data: [1, 2, 3, 4],
    },
    yAxis: {
      type: 'value',
      show: false,
    },
    grid: {
      top: 30,
      left: 120,
      right: 120,
      bottom: 20,
    },
    backgroundColor: '#004e71',
    series: [
      {
        name: '白',
        type: 'line',
        data: v1,
        smooth: true,
        symbol: 'circle',
        symbolSize: 10,
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          formatter(params) {
            return `白${params.value}°C`
          },
        },
      },
      {
        name: '晚',
        type: 'line',
        data: v2,
        smooth: true,
        symbol: 'circle',
        symbolSize: 10,
        label: {
          show: true,
          position: 'bottom',
          color: '#fff',
          formatter(params) {
            return `晚${params.value}°C`
          },
        },
      },
    ],
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin-top: 20px;
  .charts {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #004e71;
    padding: 20px 100px;
    .top {
      display: flex;
      color: #fff;
      margin: 20px 0;
      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        background: #004e71;
        span {
          background: #004e71;
        }
      }
    }
    .bottom {
      margin-top: 20px;
      width: 100%;
      height: 100px;
      .chart {
        background: #004e71;
        height: 100%
      }
    }
  }
}
</style>
